Preact: Lengva React alternatyva šiuolaikiniam žiniatinklio kūrimui

Nuolat besikeičiančiame žiniatinklio kūrimo kraštovaizdyje tinkamos priekinio galo bibliotekos ar sistemos pasirinkimas yra labai svarbus kuriant našias ir patogias naudoti programas. Nors React tapo dominuojančia jėga, jos dydis ir sudėtingumas kartais gali būti kliūtis, ypač projektuose, kuriuose didžiausias prioritetas teikiamas našumui. Čia pasirodo Preact – greita, lengva alternatyva React su panašiu API, siūlanti patrauklų sprendimą kūrėjams, ieškantiems supaprastintos kūrimo patirties.

Kas yra Preact?

Preact yra JavaScript biblioteka, teikianti virtualų DOM kuriant vartotojo sąsajas. Ji siekia būti tiesioginiu React pakaitalu, siūlydama pagrindines React funkcijas su žymiai mažesniu dydžiu. Nors React sveria apie 40KB (sumažintas ir suglaudintas), Preact sveria vos 3KB, todėl tai yra idealus pasirinkimas programoms, kurioms dydis ir našumas yra kritiniai.

Pagalvokite apie Preact kaip apie liesesnį, greitesnį React pusbrolį. Jis teikia tuos pačius pagrindinius privalumus – komponentais pagrįstą architektūrą, virtualų DOM diferencijavimą ir JSX palaikymą – bet pagrindinis dėmesys skiriamas paprastumui ir efektyvumui. Dėl to ji ypač patraukli mobiliosioms programoms, vieno puslapio programoms (SPA) ir įterptinėms sistemoms, kuriose rūpi išteklių apribojimai.

Pagrindiniai Preact naudojimo privalumai

• Mažesnis dydis: Svarbiausias Preact pranašumas yra jo mažas dydis. Mažesnė biblioteka lemia greitesnį atsisiuntimo laiką, pagerintą pradinio įkėlimo našumą ir geresnę vartotojo patirtį, ypač lėtesniuose tinkluose ir įrenginiuose.
• Greitesnis našumas: Efektyvus Preact virtualaus DOM diferencijavimo algoritmas ir mažesnis kodas prisideda prie greitesnio atvaizdavimo ir pagerinto bendro našumo. Tai gali lemti didesnį reagavimą ir sklandesnę vartotojo sąsają.
• React suderinamumas: Preact API iš esmės yra suderinamas su React, todėl lengva perkelti esamus React projektus į Preact arba naudoti Preact su React komponentais. Šis suderinamumas taip pat reiškia, kad su React susipažinę kūrėjai gali greitai išmokti ir naudoti Preact. Atkreipkite dėmesį, kad tai nėra 100 % ir gali prireikti kai kurių pakeitimų.
• ES modulių palaikymas: Preact sukurta taip, kad sklandžiai veiktų su ES moduliais, leidžiančiais kūrėjams pasinaudoti šiuolaikinėmis JavaScript funkcijomis ir pagerinti kodo organizavimą.
• Supaprastintas kūrimas: Mažesnis Preact API plotas ir dėmesys paprastumui palengvina mokymąsi ir naudojimą, sumažindami naujų kūrėjų mokymosi kreivę ir supaprastindami kūrimo procesą.
• Puiki ekosistema: Nors ir mažesnė už React, Preact ekosistema auga ir siūlo daugybę naudingų įskiepių ir bibliotekų, įskaitant maršrutizavimą, būsenos valdymą ir UI komponentus.

Preact naudojimo atvejai

Preact ypač tinka šiems scenarijams:

• Mobiliosios programos: Mažas Preact dydis ir didelis našumas daro ją puikiu pasirinkimu kuriant mobiliąsias programas, kur išteklių apribojimai ir vartotojo patirtis yra kritiniai. Pavyzdžiui, apsvarstykite naujienų programą, skirtą vartotojams regionuose, turinčiuose ribotą pralaidumą. Preact gali užtikrinti žymiai greitesnį pradinį įkėlimo laiką, palyginti su React, todėl vartotojo patirtis bus geresnė.
• Vieno puslapio programos (SPA): Efektyvus Preact atvaizdavimas ir mažas dydis leidžia ją idealiai naudoti kuriant SPA, kur našumas yra labai svarbus norint išlaikyti sklandžią ir reaguojančią vartotojo sąsają. Pavyzdys galėtų būti paprasta CRM programa, kurioje svarbi greita sąveika.
• Įterptinės sistemos: Minimalus Preact dydis ir efektyvus našumas leidžia ją pritaikyti įterptinėms sistemoms, kur ištekliai yra riboti. Įsivaizduokite išmanųjį namų įrenginį su mažu ekranu. Preact gali užtikrinti reaguojančią ir efektyvią UI, nesuvartodama per daug išteklių.
• Progresyviosios žiniatinklio programos (PWA): PWA naudingas greitas įkėlimo laikas ir neprisijungus prie tinklo galimybės. Mažas Preact dydis prisideda prie greitesnio įkėlimo ir pagerinto našumo, pagerindamas PWA patirtį. Pagalvokite apie neprisijungus prie tinklo kelionių gido programą.
• Žiniatinklio svetainės su ribotais ištekliais: Žiniatinklio svetainėms, kuriose našumas ir puslapio svoris yra kritiniai, Preact gali suteikti didelį pranašumą prieš React. Tai ypač aktualu žiniatinklio svetainėms, skirtoms vartotojams, kurie gyvena vietovėse su lėtu interneto ryšiu.
• Greiti prototipai: Kadangi Preact turi mažiau funkcijų nei React, sukurti ir paleisti prototipą yra paprasčiau.

Preact vs. React: Pagrindiniai skirtumai

Nors Preact siekia būti tiesioginiu React pakaitalu, tarp šių dviejų bibliotekų yra keletas pagrindinių skirtumų:

• Dydis: Kaip minėta anksčiau, Preact yra žymiai mažesnė nei React (3KB vs. 40KB).
• Funkcijos: React siūlo platesnį funkcijų asortimentą, įskaitant pažangias funkcijas, tokias kaip Context API, Suspense ir lygiagretusis režimas. Preact orientuojasi į pagrindines React funkcijas ir praleidžia kai kurias iš šių pažangesnių funkcijų.
• Sintetiniai įvykiai: React naudoja sintetinę įvykių sistemą, kuri normalizuoja įvykius skirtingose naršyklėse. Preact naudoja natyvius naršyklės įvykius, kurie gali pagerinti našumą, bet gali prireikti atsargiau elgtis su suderinamumo su skirtingomis naršyklėmis problemomis.
• createElement: React naudoja `React.createElement` virtualaus DOM mazgams kurti. Preact remiasi JSX, kuris tiesiogiai transformuojasi į funkcijų iškvietimus.
• PropType Validation: React turi `PropTypes` duomenims, kurie perduodami tarp komponentų, patvirtinti. Preact neturi jokio įmontuoto mechanizmo.

Pradžia su Preact

Pradėti dirbti su Preact yra paprasta. Galite naudoti įvairius įrankius ir metodus, įskaitant:

create-preact-app naudojimas

Lengviausias būdas pradėti naują Preact projektą yra naudoti create-preact-app, komandinės eilutės įrankį, kuris nustato pagrindinį Preact projektą su kūrimo serveriu ir kūrimo procesu.

            npx create-preact-app my-preact-app
            

              
                Copy
              
            
          

Ši komanda sukurs naują katalogą, pavadintą `my-preact-app`, su pagrindine Preact projekto struktūra. Tada galite pereiti į katalogą ir paleisti kūrimo serverį:

            cd my-preact-app
npm start
            

              
                Copy
              
            
          

Rankinis nustatymas

Taip pat galite rankiniu būdu nustatyti Preact projektą. Tai apima pagrindinio HTML failo sukūrimą, Preact ir visų būtinų priklausomybių įdiegimą bei kūrimo proceso konfigūravimą naudojant tokius įrankius kaip Webpack arba Parcel.

Pirmiausia sukurkite `index.html` failą:

            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Preact App</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Tada įdiekite Preact ir htm:

            npm install preact htm
            

              
                Copy
              
            
          

Sukurkite `index.js` failą su šiuo turiniu:

            import { h, render } from 'preact';
import htm from 'htm';

const html = htm.bind(h);

function App() {
  return html`<div>Hello, Preact!</div>`;
}

render(html`<${App} />`, document.getElementById('app'));
            

              
                Copy
              
            
          

Galiausiai sukonfigūruokite kūrimo procesą naudodami Webpack arba Parcel, kad sujungtumėte savo kodą.

Pavyzdys: Paprastas skaitiklio komponentas Preact

Štai paprasto skaitiklio komponento pavyzdys Preact:

            import { h, useState } from 'preact';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;
            

              
                Copy
              
            
          

Šis komponentas naudoja `useState` kabliuką skaitiklio būsenai valdyti. Funkcija `increment` atnaujina būseną, kai paspaudžiamas mygtukas. Tai rodo panašumą į React kodą.

Preact ekosistema ir bendruomenė

Nors Preact ekosistema yra mažesnė nei React, joje vis dar yra įvairių naudingų įskiepių ir bibliotekų. Štai keli žymūs pavyzdžiai:

• preact-router: Paprastas ir lengvas maršrutizatorius Preact programoms.
• preact-compat: Suderinamumo sluoksnis, leidžiantis naudoti React komponentus Preact programose.
• preact-render-to-string: Biblioteka, skirta Preact komponentams atvaizduoti į eilutes, naudinga atvaizdavimui serveryje.
• preact-helmet: Biblioteka dokumento galvos metaduomenims, pvz., pavadinimui ir meta žymoms, valdyti.

Preact bendruomenė yra aktyvi ir palaikanti. Galite rasti pagalbos ir išteklių Preact GitHub saugykloje, Preact Slack kanale ir įvairiuose internetiniuose forumuose bei bendruomenėse.

Geriausia Preact naudojimo praktika

Norėdami gauti maksimalią naudą iš Preact, apsvarstykite šias geriausias praktikas:

• Optimizuokite dydį: Pasinaudokite mažu Preact dydžiu sumažindami priklausomybes ir optimizuodami savo kodą dydžiui. Naudokite tokius įrankius kaip Webpack medžių purtymas, kad pašalintumėte nenaudojamą kodą.
• Naudokite ES modulius: Naudokite ES modulius, kad pagerintumėte kodo organizavimą ir pasinaudotumėte šiuolaikinėmis JavaScript funkcijomis.
• Profilio našumas: Naudokite naršyklės kūrėjų įrankius, kad profiliuotumėte savo programos našumą ir nustatytumėte optimizavimo sritis.
• Apsvarstykite `preact-compat` taupiai: Nors `preact-compat` leidžia naudoti React komponentus, pabandykite juos iš naujo parašyti natūraliai Preact, kad padidintumėte našumą. Naudokite jį tik tada, kai tai būtina.
• Lėtas įkėlimas: Įdiekite lėtą komponentų ir išteklių įkėlimą, kad pagerintumėte pradinį įkėlimo laiką ir sumažintumėte bendrą puslapio svorį.
• Atvaizdavimas serveryje (SSR): Ištirkite atvaizdavimą serveryje, kad pagerintumėte SEO ir pradinį įkėlimo laiką. Tokios bibliotekos kaip `preact-render-to-string` gali padėti tai padaryti.

Išvada

Preact siūlo patrauklią React alternatyvą kūrėjams, ieškantiems greitos, lengvos ir efektyvios priekinio galo bibliotekos. Mažas dydis, React suderinamumas ir supaprastintas kūrimo procesas daro ją puikiu pasirinkimu mobiliosioms programoms, SPA, įterptinėms sistemoms ir svetainėms, kuriose našumas yra kritinis.

Nors React išlieka galinga ir daug funkcijų turinti biblioteka, Preact suteikia vertingą variantą kūrėjams, kurie prioritetą teikia našumui ir paprastumui. Suprasdami kiekvienos bibliotekos stipriąsias ir silpnąsias puses, kūrėjai gali priimti pagrįstus sprendimus, kuris įrankis geriausiai atitinka konkrečius jų projekto reikalavimus.

Nesvarbu, ar kuriate sudėtingą žiniatinklio programą, ar paprastą mobiliąją programėlę, verta apsvarstyti Preact kaip galingą ir lengvą React alternatyvą.

Kiti ištekliai

• Oficiali Preact svetainė
• Preact GitHub saugykla
• preact-compat GitHub saugykla
• create-preact-app GitHub saugykla